import React, { useState } from 'react';
import { Breadcrumb, Layout, Button, Flex, Menu } from 'antd';
import { Outlet } from 'react-router-dom';
const { Header, Content, Footer, Sider } = Layout;
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
import MainMenu from "@/components/MainMenu";

const View: React.FC = () => {
    const [collapsed, setCollapsed] = useState(false);
    const [vertical, setVertical] = useState<string>('horizontal');
    return (
        <Layout style={{ minHeight: '100vh' }}>
            {/* 左边侧边栏 */}
            <Sider collapsible collapsed={collapsed} trigger={null} onCollapse={value => setCollapsed(value)}>
                <div className="logo"></div>
                <MainMenu />
            </Sider>
            {/* 右边内容 */}
            <Layout className="site-layout">
                {/* 右边头部 */}
                <Header className="site-layout-backgrounds" style={{ paddingLeft: '0px' }} >
                    <Flex vertical={vertical === 'vertical'}>
                        <Button
                            type="text"
                            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                            onClick={() => setCollapsed(!collapsed)}
                            style={{
                                fontSize: '16px',
                                width: 64,
                                height: 64,
                                color: '#fff'
                            }}
                        />
                        {/* 面包屑 */}
                        <Breadcrumb className='breadcrumb' style={{ lineHeight: '64px' }}>
                            <Breadcrumb.Item>User</Breadcrumb.Item>
                            <Breadcrumb.Item>Bill</Breadcrumb.Item>
                        </Breadcrumb>
                    </Flex>
                </Header>
                {/* 右边内容部分-白色底盒子 */}
                <Content style={{ margin: '16px 16px 0' }} className="site-layout-background">
                    {/* 窗口部分 */}
                    <Outlet />
                </Content>
                {/* 右边底部 */}
                <Footer style={{ textAlign: 'center', padding: 0, lineHeight: "48px" }}></Footer>
            </Layout>
        </Layout>
    )
}

export default View;